<?xml version="1.0" encoding="UTF-8"?>

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui" template="../../Template.xhtml">
	<ui:define name="title">Manage CMS</ui:define>
	<ui:define name="body">

		<h:form id="form">
			<br />
			<br />
			<p:panelGrid columns="2">

				<h2>Manage Homepage Big and Slider Images</h2>
				<p:commandButton ajax="false" value="Add New"
					action="AddImageSite.xhtml" />

			</p:panelGrid>
			<br />
			<br />
			<br />
			<br />
			<p:growl id="msgs" showDetail="true" />
			<p:dataTable id="basicDT" var="img"
				value="#{imageSiteMB.lisImageSite}" rows="10" paginator="true"
				paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
				rowsPerPageTemplate="5,10,15">

				<p:column headerText="Id">
					<h:outputText value="#{img.idImage}" />
				</p:column>

				<p:column headerText="Big Image :" >
					<p:graphicImage url="#{img.urlImage}" width="340" height="140" />
					
				</p:column>



				<p:column headerText="Small Image:">
					 <p:graphicImage url="#{img.urlImage}" width="170" height="70" />
				</p:column>

				<p:column headerText="Statut">
					<h:outputText value="#{img.status}" />
				</p:column>

				<p:column style="width:32px;text-align: center">
					<p:commandButton update="" oncomplete="carDialog.show()"
						icon="ui-icon-search" title="View">
						<f:setPropertyActionListener value="#{img}"
							target="#{imageSiteMB.image}" />
					</p:commandButton>
					<p:commandButton ajax="false"
						action="#{imageSiteMB.edit(img.idImage)}"
						icon="ui-icon ui-icon-pencil">
					</p:commandButton>
					<p:commandButton ajax="false"
						action="#{imageSiteMB.Supprimer(img.idImage)}"
						icon="ui-icon ui-icon-close">
					</p:commandButton>
				</p:column>

			</p:dataTable>
			<p:dialog header="Image details" widgetVar="carDialog" modal="true"
				showEffect="fade" hideEffect="fade" resizable="false">
				<p:outputPanel id="imgDetail" style="text-align:center;">
					<p:panelGrid columns="2" columnClasses="label,value">
						<h:outputText value="IdImage:" />
						<h:outputText value="#{imageSiteMB.image.idImage}" />
						<h:outputText value="Heigth" />
						<h:outputText value="#{imageSiteMB.image.heigth}" />
						<h:outputText value="Statut:" />
						<h:outputText value="#{imageSiteMB.image.status}" />
						<h:outputText value="UrlImage" />
						<h:outputText value="#{imageSiteMB.image.urlImage}" />
						<h:outputText value="Width" />
						<h:outputText value="#{imageSiteMB.image.width}" />
					</p:panelGrid>
				</p:outputPanel>
			</p:dialog>

		</h:form>
		<br />
		<br />
		<br />
		<br />
	</ui:define>

</ui:composition>